<template>
	<div class="word_com">
		<div class="word_con">
			<div class="word_item" v-for="(word_item, word_index) in wordList" :key="word_index">
				<div :style="textConStyle">
					<div class="text_item" :style="textItemStyle(item, index)" v-for="(item, index) in word_item.list" :key="index">
						<div :style="wordStyle(item, index)">{{item.copywriting}}</div>
					</div>
				</div>
				<div class="operate_con">
					<span>文字_{{word_index + 1}}</span>
					<FormOutlined class="operate_icon" @click="addThisWord(word_item)" />
					<DeleteOutlined @click="deleteWord(word_index)" class="operate_icon" />
				</div>
				<div class="loading_con" v-if="loading">
					<LoadingOutlined style="font-size: 27px;" />
				</div>
			</div>
			<div class="right_add" @click="addThisWord">
				<PlusOutlined />
				添加文字
			</div>
		</div>
		<addWord :wordObj="wordObj" :visible="addVisible" @close="closeAdd" />
	</div>
</template>

<script>
	import {defineComponent, ref, reactive, toRefs, computed, nextTick, watch} from 'vue';
	import {
		PlusOutlined,
		FormOutlined,
		DeleteOutlined,
		LoadingOutlined
	} from "@ant-design/icons-vue";
	import addWord from './addWord.vue';
	import store from '@/store';
	export default defineComponent({
		components: {
			PlusOutlined,
			addWord,
			FormOutlined,
			DeleteOutlined,
			LoadingOutlined
		},
		setup(props, context) {
			const state = reactive({
				wordList: [],
				addVisible: false,
				wordObj: {},
				loading: false
			})
			const addThisWord = (item) => {
				if(item){
					state.wordObj = Object.assign({}, item)
				}
				state.addVisible = true
			}
			const closeAdd = (obj) => {
				if(!obj) {
					state.addVisible = false
					return
				}
				if(obj){
					let index = state.wordList.findIndex(item=>item.name == obj.name)
					if(index == -1){
						state.wordList.push(obj)
					} else {
						state.wordList[index] = obj
					}
					state.loading = true
					state.wordList.map((first_item, first_index)=>{
						first_item.list.map((second_item, second_index)=>{
							customFont(second_item.font_family, second_item.typeface)
						})
					})
				}
				state.wordObj = {}
				state.addVisible = false
				submitStuctrue()
			}
			
			const deleteWord = (index) =>{
				state.wordList.splice(index, 1)
				submitStuctrue()
			}
			
			const submitStuctrue = () => {
				let submitList = []
				state.wordList.map((parent_item, parent_index)=>{
					let parentList = []
					parent_item.list.map((item, index)=>{
						let submitData = {}
						if(parent_index==0 && index == 0){
							submitData['originData'] = state.wordList
						}
						submitData['html'] = `<p>${item.copywriting}</p>` // 必须
						submitData['css'] = `p {width: ${item.width};height: ${item.height};text-align:${item.align_type};font-size: ${item.font_size}px; font-family: '${item.font_family}','HappyZcool-2016'; color: ${item.color}; background-color: ${item.backgroundColor?item.backgroundColor:'transparent'}; opacity: ${item.opacity}}` // 必须
						submitData['text'] = item.copywriting
						submitData['color'] = item.color
						submitData['background'] = item.backgroundColor
						submitData['position'] = item.verticle_position
						submitData['width'] = item.width
						submitData['height'] = item.height
						submitData['opacity'] = item.opacity
						submitData['config'] = {}
						submitData['type'] = 'whole'
						submitData['config']['x'] = Number(((item.elLeft + (item.width/2) - 180)/360).toFixed(3))
						let radioHeight = radioType.value == '1:1'?360:radioType.value == '16:9'?202.5:640
						submitData['config']['y'] = Number(((radioHeight/2 - (item.elTop + (item.height/2)))/radioHeight).toFixed(3))
						submitData['config']['position'] = 'center'
						submitData['config']['font_size'] = item.font_size
						submitData['config']['transition_in'] = item.transitionKey['in']
						submitData['config']['transition_out'] = item.transitionKey['out']
						submitData['config']['effect'] = item.specialKey
						submitData['config']['start'] = item.start_time
						submitData['config']['length'] = item.end_time
						parentList.push(submitData)
					})
					submitList.push(parentList)
				})
				store.dispatch('SetClipJSONWord', submitList)
				
				context.emit('updateNumber', {
					type: 'word',
					count: state.wordList.length
				})
			}
			
			const customFont = (name, url) => {
				const fontFace = new FontFace(name, `url(${url})`);
				fontFace.load().then(() => {
					document.fonts.add(fontFace);
					state.loading = false
				}).catch((error) => {	
					console.error(error);
					state.loading = false
				});
			}
			
			const radioType = computed(()=>store.getters.clipJSON?.aspect_ratio)
			
			const textConStyle = computed(()=>{
				return {
					position: 'relative',
					backgroundImage: `url('https://hf.pigcms.com/static/wxapp/images/phone_black_back.png')`,
					backgroundSize: '100% auto',
					backgroundPosition: 'center center',
					backgroundRepeat: 'no-repeat',
					width: 360/2 + 'px',
					height: radioType.value == '1:1'?360/2+'px':radioType.value == '16:9'?202.5/2+'px':640/2+'px'
				}
			})
			
			const wordStyle = computed(() => {
				return function(item, index) {
					return {
						'font-family': item.font_family,
						'font-size': item.font_size/2 + 'px',
						'width': item.width/2 + 'px',
						'height': item.height/2 + 'px',
						'color': item.color,
						'background-color': item.backgroundColor,
						'display': 'flex',
						'align-items': item.verticle_position == 'top' ? 'start' : item
							.verticle_position == 'center' ? 'center' : 'end',
						'justify-content': item.align_type == 'left' ? 'start' : item.align_type ==
							'center' ? 'center' : 'end',
						'opacity': item.opacity
					}
				}
			})
			
			const textItemStyle = computed(()=>{
				return function(item, index) {
					return {
						'position': 'absolute',
						'width': item.width/2 + 'px',
						'height': item.height/2 + 'px',
						'left': item.elLeft/2 +'px',
						'top': item.elTop/2 +'px'
					}
				}
			})
			
			watch(()=>store.getters.clipJSON?.whole_subtitle_config, val=>{
				if(state.addVisible) return
				if (val?.length === 0) {
					state.wordList = [];
					context.emit('updateNumber', {
						type: 'word',
						count: state.wordList.length
					})
					return;
				};

				if(val?.length && val[0][0]?.originData){
					state.wordList = val[0][0]?.originData
					state.loading = true
					state.wordList.map((first_item, first_index)=>{
						first_item.list.map((second_item, second_index)=>{
							customFont(second_item.font_family, second_item.typeface)
						})
					})
					context.emit('updateNumber', {
						type: 'word',
						count: state.wordList.length
					})
				}
			},{
				deep: true,
				immediate: true
			})
			return {
				addThisWord,
				closeAdd,
				deleteWord,
				wordStyle,
				textItemStyle,
				radioType,
				textConStyle,
				...toRefs(state)
			}
		}
	})
</script>

<style lang="less" scoped>
	.word_com{
		.word_con{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.word_item{
				border-radius: 5px;
				width: 180px;
				min-height: 320px;
				background-color: #000;
				// border: 1px solid #646464;
				margin-top: 30px;
				margin-left: 10px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				background-position: center;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				position: relative;
				.loading_con{
					position: absolute;
					width: 100%;
					height: 320px;
					background-color: rgba(0, 0, 0, .3);
					left: 0;
					top: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
				}
				
				&:hover{
					.operate_con{
						.operate_icon{
							display: block;
						}
					}
				}
				.operate_con{
					position: absolute;
					width: 100%;
					height: 35px;
					display: flex;
					align-items: center;
					justify-content: center;
					left: 0;
					bottom: -35px;
					.operate_icon{
						display: none;
						margin-left: 10px; 
						cursor: pointer;
						color: #fff;
					}
				}
			}
			
			.right_add{
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #999;
				margin-left: 10px;
				margin-top: 30px;
				
				width: 180px;
				min-height: 320px;
				background-color: #343434;
				border: 1px solid #646464;
				border-radius: 6px;
				cursor: pointer;
			}
		}
	}
</style>